<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner"><img v-for="item in banner" :src="item" alt="" /></div>
			<div class="content">
				<div class="superiority">
					<div class="super_head" v-for="item in superiority_head">
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
					</div>
					
					<div class="content">
						<div v-for="item in superiority_con">
							<img :src="item.src" alt="" />
							<p class="title">{{ item.title }}</p>
							<p>{{ item.content }}</p>
							<a href="javascript:;" class="btn">{{ item.btn }}</a>
						</div>
					</div>
				</div>
					
				<div class="introduce produce" v-for="item in introduce" :style="picture_bg">
					<p>{{ item.title }}</p>
					<p>{{ item.content }}</p>
					<a href="javascript:;" class="btn">{{ item.btn }}</a>
				</div>
				
				<div class="create">
					<div v-for="item in create_head" class="create_head">
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
					</div>
					<div v-for="item in create" class="create_con">
						<div>{{ item.num }}</div>
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
	
import banner from '../../assets/banner_2.jpg'
import picture_07 from '../../assets/picture_7.jpg'
import picture_08 from '../../assets/picture_8.jpg'
import picture_bg from '../../assets/picture_bg.jpg'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer
  },
  data () {
    return {
    	banner : [banner],
    	picture_bg : "background:url('"+ picture_bg +"') center center no-repeat",
    	superiority_head : [
    		{
    			title : '服务优势',
    			content : '为您提供自助建站所需的一切，为您的用户访问体验竭尽全力'
    		}
    	],
    	superiority_con : [
    		{
    			src : picture_07,
    			title : '支持多终端跨屏展示',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用术，拥有大气舒适的界面和众多精美模板',
    			btn : '了解详情'
    		},
    		{
    			src : picture_08,
    			title : '功能强大的设计器',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用术，拥有大气舒适的界面和众多精美模板',
    			btn : '了解详情'
    		},
    	],
    	introduce : [
    		{
    			title : '梦想源自微小起业',
    			content : '采用HTML5最新网页技术，网页界面可随不同屏幕尺寸自动伸缩，实现电脑、微信、手机网站跨平台显示，为终端用户浏览带来最佳用户体验',
    			btn : '了解详情'
    		}
    	],
    	create_head : [
    		{
    			title : '匠心打造，非同凡响',
    			content : '使用最新的HTML5响应式技术网页界面随不同屏幕尺寸自动伸缩'
    		},
    	],
    	create : [
    		{
    			num : '1',
    			title : '千套精美模板',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术'
    		},
    		{
    			num : '2',
    			title : '极致的浏览体验',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术'
    		},
    		{
    			num : '3',
    			title : '专业的网站托管',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术'
    		},
    	]
    }
  },
  methods : {
  	
  }
}
</script>


<style type="text/css">
	/* product.style */
	
	.superiority{
		padding: 0.44rem 0.27rem;
	}
	.superiority .super_head{
		text-align: center; margin-bottom: 0.5rem;
	}
	.superiority .super_head p:nth-of-type(1){
		font-size: 0.24rem; line-height: 0.4rem;
	}
	.superiority .super_head p:nth-of-type(2){
		font-size: 0.12rem; color: #808080; width: 95%; margin: 0.1rem auto;
	}
	.superiority .content img{
		width: 100%;
	}
	.superiority .content .title{
		font-size: 0.18rem; line-height: 0.35rem; margin-top: 0.1rem;
	}
	.superiority .content p:nth-of-type(2){
		color: #808080; margin-bottom: 0.2rem;
	}
	.superiority .content .btn{
		width: 1.5rem; height: 0.4rem; background: #46c5fc; color: #fff; text-align: center; line-height: 0.4rem; margin: 0.3rem 0; border-radius: 0.1rem; display: block;	
	}
	
	.produce{
		background-size: 100% 3.11rem !important; color: #fff; padding: 0.5rem 0.33rem 0.2rem 0.33rem; text-align: center;
	}
	.produce p:nth-of-type(1){
		font-size: 0.24rem; margin-bottom: 0.1rem;
	}
	.produce .btn{
		display: block; width: 1.5rem; background: #fff; color: rgb(59,59,59); height: 0.4rem; border-radius:0.1rem; margin: 0.2rem auto; line-height: 0.4rem; font-size: 0.12rem;
	}
	
	.create{
		padding: 0.3rem 0.25rem;
	}
	.create .create_head{
		text-align: center; margin-top: 0.2rem; margin-bottom: 0.45rem;
	}
	.create .create_head p:nth-of-type(1){
		font-size: 0.24rem; line-height: 0.4rem;
	}
	.create .create_head p:nth-of-type(2){
		font-size: 0.12rem; color: #808080; width: 90%; margin:0 auto; line-height: 0.22rem; 
	}
	.create .create_con{
		border: 0.01rem solid #d0d0d0; padding: 0.1rem 0.1rem; margin-bottom: 0.3rem;
	}
	.create .create_con div{
		color: rgb(211,211,211); font-weight: bold; font-size: 0.6rem; margin: 0 auto; text-align: center; border: 0.01rem solid #d0d0d0; border-radius: 50%; width: 40%;
	}
	.create .create_con p:nth-of-type(1){
		font-size: 0.18rem; text-align: center; margin: 0.2rem 0;
	}
	.create .create_con p:nth-of-type(2){
		font-size: 0.12rem; text-align: center; color: #A9A9A9; margin-bottom: 0.2rem;
	}
</style>